<template>
  <span @click="bedClick($route.query.id, info.bedId)">
    <i class="iconfont f60 icon-chuang">
      <i class="num">{{ info.bedNumber.split('-')[1] }}</i>
    </i>
  </span>
</template>

<script setup>
import { guestCheckin } from '@/api'
import { Dialog } from 'vant'
import { useRouter } from 'vue-router'
const router = useRouter()
const { info } = defineProps({
  info: {
    type: Object,
    required: true
  }
})
const bedClick = async (userId, bedId) => {
  await guestCheckin(userId, bedId)
  Dialog.alert({ message: '恭喜，入住成功,床号:' + info.bedNumber }).then(
    () => {
      router.push('/reg')
    }
  )
}
</script>

<style lang="scss" scoped>
.f60 {
  font-size: 80px;
  // width: 95px;
  height: 60px;
  padding: 0 8px;
  position: relative;
  color: #999;
  .num {
    position: absolute;
    font-size: 12px;
    top: 10px;
    left: 44px;
    color: rgb(45, 45, 45);
  }
}
</style>
